<template>
  <div class="downloadCollectTable">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="tree-container">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree class="filter-tree" node-key="id" show-checkbox :data="treeData" :props="defaultProps"
            default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <el-tooltip :content="node.label" placement="top-start">
                <span>{{ node.label }}</span>
              </el-tooltip>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="collectSelctInfo">{{ taskName }} 共 <span class="collectNum">{{ collectNum }}</span> 个采集表，选中 <span
            class="selectNum">{{ selectNum }}</span> 个</div>
        <div class="selectInfoBox">
          <div class="selectInfo" :key="item.id" v-for="(item, index) in selectInfoList">
            <div>{{ item.name }}</div><i class="el-icon-delete" @click="_deleteSelect(item.id)" style="cursor: pointer;"></i>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filterText: '',
      taskName: '',
      collectNum: '1000',
      selectNum: '0',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [
        {
          id: 1,
          label: '2025ALY任务',
          children: [
            {
              id: 4,
              label: '力量构成',
              children: [
                {
                  id: 9,
                  label: 'xxx组织'
                },
                {
                  id: 10,
                  label: 'xxllx组织'
                },
                {
                  id: 11,
                  label: 'xxrrxx组织'
                }
              ]
            },
            {
              id: 24,
              label: 'ZH架构',
              children: [
                {
                  id: 12,
                  label: 'xxxx'
                }
              ]
            },
            {
              id: 41,
              label: 'XSL',
              children: [
                {
                  id: 13,
                  label: 'xxxx'
                }
              ]
            }
          ]
        }
      ],
      selectInfoList: [
        {
          name: '2025AYLXXXXXX XXXXXX XXXXX XXXXXX XXXXXXX采集表',
          id: '1'
        },
        {
          name: '2025AYLXXXXXX XXXXXX XXXXX XXXXXX XXXXXXX采集表',
          id: '2'
        },
        {
          name: '2025AYLXXXXXX XXXXXX XXXXX XXXXXX XXXXXXX采集表',
          id: '3'
        },
        {
          name: '2025AYLXXXXXX XXXXXX XXXXX XXXXXX XXXXXXX采集表',
          id: '4'
        },
      ]
    }
  },
  created() {
    this.taskName = this.$store.getters.getNodeStatus
  },
  mounted() {
  },
  methods: {
    // 树形过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    _deleteSelect(id) {
      this.selectInfoList = this.selectInfoList.filter(item => item.id !== id)
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    siderbarMsg(val) {
      this.taskName = val
      console.log(this.taskName)
    }
  },
  computed: {
    siderbarMsg() {
      return this.$store.getters.getNodeStatus;
    }
  },
}
</script>
<style scoped>
.collectNum {
  color: #0099ff;
}

.selectNum {
  color: #28c301;
}

.collectSelctInfo {
  color: var(--title);
  font-size: var(--font16);
}

.tree-container {
  height: calc(100vh - 380px);
  overflow: auto;
  border: 1px solid var(--bigborder-color);
  padding: 10px;
  box-sizing: border-box;
}

.selectInfoBox {
  border: 1px dashed var(--bigborder-color);
  padding: 10px;
  box-sizing: border-box;
  height: calc(100vh - 413px);
  overflow: auto;
  margin-top: 10px;
}

.selectInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: var(--input-bg);
  border: 1px solid var(--bigborder-color);
  margin-bottom: 5px;
  color: var(--title);
}
</style>